<div>
    <div>
        <iframe width="100%" height="530" [src]="video.url | safe">
    </iframe>
    <!--<video [src]="video.url"  width="100%" height="530" controls="controls">
    您的浏览器不支持 video 标签。
    </video>-->
    </div>

    <form>
        <div *ngIf="editTitle" class="form-group">
            <input type="input" class="form-control" name="title" required placeholder="title" 
            [(ngModel)]="video.title">
        </div>
        <h3 *ngIf="!editTitle" (click)="onTitleClick()">{{video.title}}</h3>
        <hr>
        <h4>Url:</h4>
        <div *ngIf="editUrl" class="form-group">
            <input type="input" class="form-control" name="url" required placeholder="url" 
            [(ngModel)]="video.url">
        </div>
        <p *ngIf="!editUrl" (click)="onUrlClick()">{{video.url}}</p>
        <h4>Desc:</h4>
        <div *ngIf="editDesc" class="form-group">
            <textarea type="input" class="form-control" rows="5" name="desc" 
            [(ngModel)]="video.description"></textarea>
        </div>
        <p *ngIf="!editDesc" (click)="onDescClick()">{{video.description}}</p>

        <button type="button" (click)="updateVideo()" class="btn btn-primary">Update</button>
        <button type="button" (click)="deleteVideo()" class="btn btn-danger">Delete</button>
    </form>
</div>
